<template>
 <div class="all">
   <div class="map">
    <van-icon name="arrow-left" class="leftcl" @click='back'/>
        <div class="left">
            <div class="sh" @click='$router.push("/city")'>
              <span>{{$route.query.name||'上海'}}</span>
              <van-icon name="arrow-down" />
            </div>
            <div class="search">
              <van-icon name="search" class="sea"/>
              <input type="text" placeholder="请输入小区或地址">
            </div>
        </div>
        <div class="right">
          <van-icon name="location-o"  class="rg"/>
        </div>
      </div>
      <div class="dh">
       <van-dropdown-menu>
        <van-dropdown-item title="区域">
          <van-picker
            :columns="columns" show-toolbar toolbar-position='bottom'
            value-key="label"
             @cancel="onCancel"
            @confirm="onConfirm"
          />
        </van-dropdown-item>
         <van-dropdown-item title="方式">
          <van-picker
            :columns="ls.rentType" show-toolbar toolbar-position='bottom'
             @cancel="onCancel"
            @confirm="onConfirm"
              value-key="label"
          />
        </van-dropdown-item>
         <van-dropdown-item title="租金">
          <van-picker
            :columns="ls.price" show-toolbar toolbar-position='bottom'
             @cancel="onCancel"
            @confirm="onConfirm"
            value-key="label"
          />
        </van-dropdown-item>
         <van-dropdown-item title="筛选">
         <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell>
        <van-popup v-model="show" @click="showPopup" position="right" :style="{ height: '100%' }">内容</van-popup> -->
        </van-dropdown-item>
      </van-dropdown-menu>
      </div>
    <ul>
      <li v-for="(item,index) in list" :key="index" @click='$router.push(`/message/${item.houseCode}`)'>
        <img :src="`http://www.xiaoshuaipeng.com:8080${item.houseImg}`" alt="">
        <div class="right">
          <h3 class="one">{{item.title}}</h3>
          <p class="two">{{item.desc}}</p>
          <p class="three">{{item.tags[0]}}</p>
          <p class="four">{{item.price}}元/月</p>
        </div>
      </li>
    </ul>
 </div>
</template>

<script>
// import axios from 'axios'
import { house, condition } from '../api/user'
export default {
  data () {
    return {
      list: '',
      ls: '',
      show: false,
      columns: [
      // {
      //   text: '浙江',
      //   value: 'Zhejiang',
      //   children: [
      //     {
      //       text: '杭州',
      //       value: 'Hangzhou',
      //       children: [
      //         { text: '西湖区', value: 'Xihu' },
      //         { text: '余杭区', value: 'Yuhang' },
      //       ],
      //     },
      //   ],
      // },
      ]
    }
  },
  components: {},
  created () {
    this.Getdata()
    console.log(this.$route.query)
  },
  methods: {
    showPopup () {
      this.show = true
    },
    onCancel () {
      console.log('1')
    },
    onConfirm () {
      console.log('2')
    },
    async Getdata () {
      // const {data:{body}} =await axios.get('http://www.xiaoshuaipeng.com:8080/houses?cityId=AREA%7Cdbf46d32-7e76-1196&start=1&end=20')
      const { data: { body } } = await house(this.$route.query.value)
      // body.list.forEach(item => {
      //     item.houseImg='http://www.xiaoshuaipeng.com:8080'+item.houseImg
      // });
      this.list = body.list

      // 区域
      const { data: { body: res } } = await condition(this.$route.query.value)
      this.ls = res
      console.log(this.ls)
      console.log(res)
      this.columns.push(res.area)
      this.columns[0].children[0].children = [{ label: '' }]
      this.columns.push(res.subway)
      this.columns[1].children[0].children = [{ label: '' }]
      console.log(this.columns)
    },
    back () {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang='less'>

.dh{
  margin-top: 10px;
}
.xz{
  height: 340px;
  background-color: white;
  position: absolute;
  width: 100%;
}
.xz .btn{
  display: flex;
  /* margin-top: 290px; */
  /* margin-bottom: -50px; */
  margin-top: -20px;
  z-index: 99;
}
.xz .btn span{
  width: 50%;
  height: 50px;
  border-top: 1px solid #e5e5e5;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
}
.xz .btn span:first-child{
  color: #21b97a;
}
.xz .btn span:last-child{
  background-color: #21b97a;
  color: white;
}
.map{
  display: flex;
  height: 35px;
  /* border: 1px solid black; */
  align-items: center;
  padding: 5px;
  margin-bottom: -5px;
}
.sea{
  font-size: 18px;
  margin-right: 5px;
}
.leftcl{
  font-size: 20px;
  width: 30px;
  text-align: center;
  line-height: 35px;
}
.left{
  display: flex;
  background-color: #ffffff;
  height:35px;
  align-items: center;
  /* width: 290px; */
  padding: 5px;
  box-sizing: border-box;
  margin-right: 5px;
}
.sh{
  border-right: 1px solid black;
  margin-right: 10px;
  width: 55px;
}
.rg{
  font-size: 25px;
  color: #00ae66;
}
.search input::-webkit-input-placeholder{
  font-size: 13px;
  color: #9c9fa1;
}
.search input{
  border: 0;
}
.all ul{
  max-width: 100%;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background-color: white;
}
.all ul li{
  display: flex;
  border: 0px solid black;
  margin: 10px 0;
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 0;
  max-width: 100%;
}
.all ul li img{
  width: 120px;
  height: 80px;
  margin-right: 20px;
}
.one{
  font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 220px;
}
.two{
  white-space: nowrap;
    vertical-align: middle;
    font-size: 12px;
    color: '#afb2b3';
}
.three{
      color: #39becd;
    background: #e1f5f8;
    font-size: 12px;
    border-radius: 3px;
    padding: 4px 5px;
    margin-right: 5px;
    line-height: 12px;
    width: 50px;
}
.four{
  font-size: 12px;
    color: #fa5741
}
 ::v-deep .van-picker__toolbar {
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      border-top: 1px solid #e9e9e9;
      .van-picker__confirm {
        flex: 2 1;
        color: #fff;
        background-color: #21b97a;
      }
     .van-picker__cancel {
        flex: 1 1;
        color: #21b97a;
      }
    }
</style>
